<template>
  <el-row>
    <el-col :span="3">ResourceQuotas</el-col>
    <el-col :span="3">{{ filterTableData.length }} Items</el-col>
    <el-col :span="6">
      <NamespaceDropDown ref="namespaceDropdown"></NamespaceDropDown>
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="queryString"
        placeholder="查询内容"
        name="queryString"
        clearable
        @keyup.enter.native="query"
      ></el-input>
    </el-col>
    <el-col :span="2"><el-button @click.native="exportReport" >export</el-button></el-col>
  </el-row>
  <el-row>
    <el-table
      :data="filterTableData"
      border
      style="width: 100%"
      max-height="550px"
      v-loading="loading"
    >
      <el-table-column prop="metadata.name" label="name" width="150" sortable>
        <template #default="scope">
          <a
            style="cursor: pointer; color: red"
            @click.native="openItemAsYaml(scope.row, 'ResourceQuota')"
            >{{ scope.row.metadata.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="metadata.namespace"
        label="namespace"
        width="80"
        fixed
        sortable
      />
      <el-table-column label="cpu">
        <el-table-column prop="status.hard.cpu" label="quota" width="100" sortable>
          <template #default="scope">{{ to_cpu_h(scope.row.status.hard.cpu) }}</template>
        </el-table-column>
        <el-table-column prop="status.used.cpu" label="used" width="100" sortable>
          <template #default="scope">{{ to_cpu_h(scope.row.status.used.cpu) }}</template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="limits.cpu">
        <el-table-column label="quota" width="100">
          <template #default="scope">{{
            to_cpu_h(scope.row.status.hard["limits.cpu"])
          }}</template>
        </el-table-column>
        <el-table-column label="used" width="100">
          <template #default="scope">{{
            to_cpu_h(scope.row.status.used["limits.cpu"])
          }}</template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="memory">
        <el-table-column prop="status.hard.memory" label="quota" width="100" sortable>
          <template #default="scope">{{
            to_memory_g(scope.row.status.hard.memory)
          }}</template>
        </el-table-column>
        <el-table-column prop="status.used.memory" label="used" width="100" sortable>
          <template #default="scope">{{
            to_memory_g(scope.row.status.used.memory)
          }}</template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="limits.memory">
        <el-table-column label="quota" width="100">
          <template #default="scope">{{
            to_memory_g(scope.row.status.hard["limits.memory"])
          }}</template>
        </el-table-column>
        <el-table-column label="used" width="100">
          <template #default="scope">{{
            to_memory_g(scope.row.status.used["limits.memory"])
          }}</template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="configmaps">
        <el-table-column
          prop="status.hard.configmaps"
          label="quota"
          width="100"
          sortable
        />
        <el-table-column
          prop="status.used.configmaps"
          label="used"
          width="100"
          sortable
        />
      </el-table-column>

      <el-table-column label="secrets">
        <el-table-column prop="status.hard.secrets" label="quota" width="100" sortable />
        <el-table-column prop="status.used.secrets" label="used" width="100" sortable />
      </el-table-column>

      <el-table-column label="age" width="120" prop="metadata.creationTimestamp" sortable>
        <template #default="scope">{{
          to_age(scope.row.metadata.creationTimestamp)
        }}</template>
      </el-table-column>
    </el-table>
  </el-row>

  <div class="mydialog">
    <el-dialog v-model="yamlVisible" :fullscreen="true">
      <el-tabs type="border-card">
        <el-tab-pane label="Yaml">
          <YamlEdit ref="yamlEdit"></YamlEdit>
        </el-tab-pane>
        <el-tab-pane label="Info">Info</el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { ref, nextTick } from "vue";
import { TableMixins } from "@/mixins/TableMixins";
import NamespaceDropDown from "@/components/k8s/NamespaceDropDown.vue";
import emitter from "@/eventbus";
export default {
  name: "ResourceQuotaList",
  props: {},
  mixins: [TableMixins],
  components: { NamespaceDropDown },
  data() {
    return {
      tableData: [],
      loading: false,
      namespaces: [],
      queryString: "",
      yamlVisible: false,
    };
  },
  mounted() {
    this.query();
    emitter.on("query_namespaces", (newValue) => {
      this.namespaces = newValue;
    });
  },
  computed: {
    filterTableData() {
      return this.tableData
        .filter(
          (t) =>
            this.namespaces.length == 0 || this.namespaces.includes(t.metadata.namespace)
        )
        .filter((t) => t.metadata.name.includes(this.queryString));
    },
  },
  methods: {
    async getItems() {
      let items = await window.k8s_GetResourceQuotas("");
      // console.log(items)
      return items;
    },
    async exportReport(){

      await window.k8s_ExportResourceQuotaReports()
    },
  },
};
</script>
<style scoped>
/*弹出框高度样式调整*/
.mydialog :deep() .el-dialog__body {
  overflow: auto;
  height: 80vh;
}

.mydialog :deep() .el-tabs--border-card {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content .el-tab-pane {
  height: 70vh;
}
</style>
